<template>
   <view>
     <view class="search-sticky">
       <shop-search @click="toGoodSearch"></shop-search>
     </view>
     <view class="scroll-wrapper">
       <!-- 左侧滚动一级分类选项 -->
       <scroll-view class="left-scroll" :style="{height: systemHeight + 'px'}" :scroll-y="true" :show-scrollbar="true">
         <view
           class="left-scroll-item"
           :class="{'active': active === index }"
           v-for="(cateLevel1, index) of categoryList"
           :key="cateLevel1.cat_id"
           @click="switchCatehandler(index)"
         >
         {{cateLevel1.cat_name}}
         </view>
       </scroll-view>
       <!-- 右侧滚动二级分类选项 -->
       <scroll-view :scroll-top="scrollTop" scroll-y="true" class="right-scroll" :style="{height: systemHeight + 'px'}">
         <block
           class="category-item"
           v-for="cateLevel2 of categoryItemList"
           :key="cateLevel2.cat_id"
         >
           <view class="category-item-title">
             / {{cateLevel2.cat_name}} /
           </view>
           <!-- 三级分类小项 -->
           <view
           class="category-item-wrapper">
             <navigator 
             v-for="item of cateLevel2.children"
             :key="item.cat_id"
             :url="'/subpkg/goods_list/goods_list?cid=' + item.cat_id"
             class="category-item-info">
               <image :src="item.cat_icon" mode=""></image>
               <text>{{item.cat_name}}</text>
             </navigator>
           </view>
         </block>
       </scroll-view>
     </view>
   </view>
</template>

<script>
  import TabBarBadge from '../../mixins/tabbar-badge.js'
  export default {
    mixins: [TabBarBadge],
    data() {
      return {
        // 当前设备屏幕高度
        systemHeight: 0,
        // 一级分类列表数据
        categoryList: [],
        // 一级分类选中项
        active: 0,
        // 重置滚动条位置
        scrollTop: 0
      }
    },
    onLoad() {
      // 获取当前设备系统信息
      const systemInfo = uni.getSystemInfoSync()
      this.systemHeight = systemInfo.windowHeight - 50
      // 获取分类数据
      this.getCategoryData()
    },
    methods: {
      // 获取分类数据源
      async getCategoryData() {
        const { data } = await uni.$http.get('/api/public/v1/categories')
        if (data.meta.status !== 200) return uni.$showMsg()
        this.categoryList = data.message
      },
      // 点击切换一级分类
      switchCatehandler(index) {
        this.active = index
        // 切换选项改变滚动条scroll-top值 实现重置效果
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      toGoodSearch() {
        uni.navigateTo({
          url: '/subpkg/search_good/search_good'
        })
      }
    },
    computed: {
      // 通过一级分类获取二级分类数据源
      categoryItemList () {
        if (this.categoryList.length === 0) {
          return []
        }
        return this.categoryList[this.active].children
      }
    }
 }
</script>

<style lang="scss">
  .scroll-wrapper {
    display: flex;
    .left-scroll {
      width: 260rpx;
      background-color: #efefef;
      
      .left-scroll-item {
        text-align: center;
        color: #000;
        padding: 20rpx;
        font-size: 24rpx;
        
        &.active {
          position: relative;
          background-color: #fff;
          
          &::before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 50%;
            width: 5rpx;
            height: 45rpx;
            border-radius: 20rpx;
            background-color: #C00000;
            transform: translateY(-50%);
          }
          
        }
      }
    }
    .right-scroll {
      .category-item-title {
        margin-top: 25rpx;
        text-align: center;
        font-weight: 700;
        font-size: 24rpx;
      }
      .category-item-wrapper {
        display: flex;
        flex-wrap: wrap;
        .category-item-info {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 14rpx;
          justify-content: center;
          image {
            width: 80px;
            height: 80px;
            margin-bottom: 12rpx;
          }
          text {
            font-size: 24rpx;
          }
        }
      }
    }
  }
  // 不显示滚动条
  ::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
  }
</style>
